<nz-modal [(nzVisible)]="isVisible" [nzTitle]="title" [nzFooter]="modalFooter" (nzOnCancel)="closeModal()">
    <form class="user-form" [formGroup]="userForm" *ngIf="userForm">
        <table class="info-box" cellspacing="0">
            <!--用户角色-->
            <tr>
                <td class="label-td">用户角色</td>
                <td class="input-td">
                    <nz-select formControlName="role">
                        <nz-option *ngFor="let role of roles" [nzValue]="role.value"
                                   [nzLabel]="role.label"></nz-option>
                    </nz-select>
                </td>
            </tr>
            <!--用户名-->
            <tr>
                <td class="label-td">用户名</td>
                <td class="input-td">
                    <input nz-input formControlName="username" placeholder="请输入用户名">
                </td>
            </tr>
            <!--昵称-->
            <tr>
                <td class="label-td">昵称</td>
                <td class="input-td">
                    <input nz-input formControlName="nickname" placeholder="请输入用户昵称">
                </td>
            </tr>
            <!--性别-->
            <tr>
                <td class="label-td">性别</td>
                <td class="input-td">
                    <nz-select formControlName="sex">
                        <nz-option *ngFor="let sex of sexs" [nzValue]="sex.value"
                                   [nzLabel]="sex.label"></nz-option>
                    </nz-select>
                </td>
            </tr>
            <!--手机号-->
            <tr>
                <td class="label-td">手机号</td>
                <td class="input-td">
                    <input nz-input formControlName="phone" placeholder="请输入手机号">
                </td>
            </tr>
            <!--用户类型-->
            <tr>
                <td class="label-td">用户类型</td>
                <td class="input-td">
                    <nz-select formControlName="type">
                        <nz-option *ngFor="let type of types" [nzValue]="type.value"
                                   [nzLabel]="type.label"></nz-option>
                    </nz-select>
                </td>
            </tr>
            <!--状态-->
            <tr>
                <td class="label-td">状态</td>
                <td class="input-td">
                    <nz-select formControlName="enabled">
                        <nz-option *ngFor="let enabled of enableds" [nzValue]="enabled.value"
                                   [nzLabel]="enabled.label"></nz-option>
                    </nz-select>
                </td>
            </tr>
            <!--密码-->
            <ng-container *ngIf="!editMode">
                <tr>
                    <td class="label-td">密码</td>
                    <td class="input-td">
                        <input nz-input formControlName="password" placeholder="请输入密码" type="password">
                    </td>
                </tr>
                <tr>
                    <td class="label-td">确认密码</td>
                    <td class="input-td">
                        <input nz-input formControlName="rePassword" placeholder="请再次输入密码" type="password">
                    </td>
                </tr>
            </ng-container>

        </table>
    </form>
    <ng-template #modalFooter>
        <button nz-button nzType="default" (click)="closeModal()">取消</button>
        <button nz-button nzType="primary" (click)="submit()" [nzLoading]="loading">确认</button>
    </ng-template>
</nz-modal>
